<template>
  <div class="shop_classify">
    <div class="flex top_exp">
      <img
        style="max-width:280px;height:200px"
        src="../../../assets/images/classify_exp.jpg"
        alt="轮播图设置"
      >
      <div class="flex-1 warn-box">
        <p class="flex align-center">
          <svg-icon
            style="margin-right: 17px"
            icon-class="warn"
            :size="20"
          />
          <span style="font-size:16px">店铺分类设置说明</span>
        </p>
        <p
          class="color-666"
          style="line-height:28px"
        >
          1. 系统为商品创建了默认分类，自定义分类需避免与默认分类重复。<br />
          2. 店铺商品分类展示在店铺详情页中，可以帮助消费者快速找到商品。<br />
          3. 从多角度对店铺商品分类，例如品牌、适用人群、使用场景，有利于消费者快速定位到商品。
        </p>
      </div>
    </div>
    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon
          style="margin-right:15px"
          icon-class="list"
          :size="15"
        />数据列表
      </h5>
      <el-button
        size="small"
        class="add-btn"
        icon="el-icon-plus"
        v-if="$hasMethod('#addCategory')"
        @click="openAddDialog()"
      >添加自定义分类</el-button>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        align="center"
        label="排序"
        width="80"
      >
        <template slot-scope="scope">
          <span v-if="!$hasMethod('#sortCategory')">{{scope.row.sort}}</span>
          <el-input
            v-else
            oninput="value=value.replace(/[^\d]/g,'')"
            maxLength='9'
            v-model="scope.row.sort"
            @change="changeSort(scope.row.id, scope.row.sort)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column
        prop="cat_name"
        label="分类名称"
        align="center"
      />
      <el-table-column
        prop="goodsCount"
        label="商品数量"
        align="center"
      />
      <el-table-column
        prop="create_time"
        label="添加时间"
        align="center"
      />
      <el-table-column
        fixed="right"
        align="center"
        label="操作"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            v-if="$hasMethod('#manage')"
            type="warning"
            size="mini"
            @click="goToManage(scope.row.id, scope.row.cat_name)"
          >关联商品</el-button>
          <el-button
            v-if="$hasMethod('#deleteCategory')"
            type="danger"
            size="mini"
            @click="removeItem(scope.row.id, scope.row.goodsCount)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <custom-page
      ref="customPage"
      :total="total"
      @getList="getList"
    ></custom-page>
    <add-category
      ref="addCategory"
      @getList="getList"
    ></add-category>
  </div>
</template>
<script>
import customPage from "@/components/customPage";
import addCategory from "../addCategory";
import { editSort, shopCategoryList, delShopCategory } from "@/api/shop";
export default {
  components: { customPage, addCategory },
  data() {
    return {
      tableData: [],
      total: 0
    }
  },
  methods: {
    goToManage(id, name) {
      this.$router.push({ name: 'shopManage', params: { editId: id, editName: name } });
    },
    // 更改排序
    changeSort(id, val) {
      editSort({
        type: 'ShopCategory',
        id: id,
        sort: val
      }).then(res => {
        this.getList();
      })
    },
    openAddDialog() {
      this.$refs.addCategory.dialogVisible = true;
    },
    // 删除
    removeItem(id, num) {
      const tip = "所删分类包含商品数：" + num + "，确认删除该分类吗？"
      this.$confirm(tip, '删除分类', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        delShopCategory(id).then(res => {
          this.getList();
        });
      }).catch(() => { });
    },
    getList() {
      const { page, pageSize } = this.$refs.customPage;
      shopCategoryList({
        page,
        pageSize
      }).then(res => {
        this.tableData = res.data || [];
        this.total = res.total;
      })
    }
  },
  mounted() {
    this.getList();
  }
}
</script>
<style lang="scss" scoped>
.shop_classify {
  padding: 30px;
}
.top_exp {
  margin-bottom: 20px;
}
</style>